I am using the jquery plug-in datatables.
I am using the feature, datatables-multi-filter-select on my website with php code.
I want to move the drop down filter from the footer to the header like in the following example:
http://www.datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets/
Can anyone please update the following PHP code sample to accomplish this?
Code:
/** * Register necessary Plugin Filters */add_filter( 'tablepress_shortcode_table_default_shortcode_atts', 'tablepress_add_shortcode_parameters_multi_filter_select' );add_filter( 'tablepress_table_render_options', 'tablepress_set_table_foot_option', 10, 2 );add_filter( 'tablepress_table_js_options', 'tablepress_add_multi_filter_select_js_options', 10, 3 );add_filter( 'tablepress_datatables_command', 'tablepress_add_multi_filter_select_js_command', 10, 5 ); /** * Add "datatables_multi_filter_select" as a valid parameter to the [table /] Shortcode */function tablepress_add_shortcode_parameters_multi_filter_select( $default_atts ) { $default_atts['datatables_multi_filter_select'] = false; return $default_atts;} /** * Make sure that "table_foot" and "datatables_scrollX" are false, if "datatables_multi_filter_select" is true, * as the footer will be appended by the JS. Scrolling will not work with automatically added content */function tablepress_set_table_foot_option( $render_options, $table ) { if ( $render_options['datatables_multi_filter_select'] ) { $render_options['table_foot'] = false; $render_options['datatables_scrollX'] = false; } return $render_options;} /** * Pass "datatables_multi_filter_select" from Shortcode parameters to JavaScript arguments */function tablepress_add_multi_filter_select_js_options( $js_options, $table_id, $render_options ) { $js_options['datatables_multi_filter_select'] = $render_options['datatables_multi_filter_select']; // register the JS if ( $js_options['datatables_multi_filter_select'] ) { $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min'; $js_multi_filter_select_url = plugins_url( "multi-filter-select{$suffix}.js", __FILE__ ); wp_enqueue_script( 'tablepress-multi_filter_select', $js_multi_filter_select_url, array( 'tablepress-datatables' ), '1.0', true ); } return $js_options;} /** * Evaluate "datatables_multi_filter_select" parameter and add corresponding JavaScript code, if needed */function tablepress_add_multi_filter_select_js_command( $command, $html_id, $parameters, $table_id, $js_options ) { if ( ! $js_options['datatables_multi_filter_select'] ) return $command; $name = str_replace( '-', '_', $html_id ); $datatables_name = "DT_{$name}"; $command = <<<JSvar {$name} = $('#{$html_id}'), {$datatables_name} = {$name}.dataTable({$parameters}), {$name}_tfoot, {$name}_selects, ths = '<tfoot>';{$name}.find('thead th').each( function( i ) { ths += '<th>' + datatables_fnCreateSelect( {$datatables_name}.fnGetColumnData(i) ) + '</th>';} );ths += '</tfoot>';{$name}_tfoot = {$name}.append(ths).find('tfoot');{$name}_selects = {$name}_tfoot.find('select');{$name}_tfoot.on( 'change', 'select', function() { {$datatables_name}.fnFilter( $(this).val(), {$name}_selects.index(this) );} );JS; return $command;}
(function($) {/* * Function: fnGetColumnData * Purpose: Return an array of table values from a particular column. * Returns: array string: 1d data array * Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function * int:iColumn - the id of the column to extract the data from * bool:bUnique - optional - if set to false duplicated values are not filtered out * bool:bFiltered - optional - if set to false all the table data is used (not only the filtered) * bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array * Author: Benedikt Forchhammer <b.forchhammer /AT\ mind2.de> */$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) { // check that we have a column id if ( typeof iColumn == "undefined" ) return new Array(); // by default we only wany unique data if ( typeof bUnique == "undefined" ) bUnique = true; // by default we do want to only look at filtered data if ( typeof bFiltered == "undefined" ) bFiltered = true; // by default we do not wany to include empty values if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true; // list of rows which we're going to loop through var aiRows; // use only filtered rows if (bFiltered == true) aiRows = oSettings.aiDisplay; // use all rows else aiRows = oSettings.aiDisplayMaster; // all row numbers // set up data array var asResultData = new Array(); for (var i=0,c=aiRows.length; i<c; i++) { iRow = aiRows[i]; var aData = this.fnGetData(iRow); var sValue = aData[iColumn]; // ignore empty values? if (bIgnoreEmpty == true && sValue.length == 0) continue; // ignore unique values? else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue; // else push the value onto the result data array else asResultData.push(sValue); } return asResultData;}}(jQuery)); function datatables_fnCreateSelect( aData ) { var r = '<select><option value=""></option>', i, iLen = aData.length; for ( i=0 ; i<iLen ; i++ ) { r += '<option value="'+aData[i]+'">'+aData[i]+'</option>'; } return r + '</select>';}
